Hello and welcome.
In this lecture we are going to create the stylin for our project.
He is in csx to save time hire for it he added.
The CEO says could to our -- so let me just run through them with you.
Every little style an element you need to define the selector which is the item you are trying to start.
Then you separate.
Now you have the the curly braces.
That's the opening and that's the closing in between the curly braces is where you define the stylin
you want to use for that element online to hear the body is the selector which is the element I want
to start.
And these are the values the properties are on the left and the values are on them.
You separate the property from the value with a on and then once you've defined the value you need to
end it with a semi or so I call on if you don't do that.
It will not apply the stylee to the element saw line 3 there.
I've got a text a line property and have set the value to the centre.
Well that means it all sent to any text for the body of a DAT element.
Line 4 is the back ground which is the background colour.
I've said to white F F F.
It's also the same thing as white in Hexa value.
A decimal values in 5.
I've defined a font family font family is naturally the font type defined sense serif as the first choice
and if that's not available it will default to you.
These are one or the other should be available on most computers.
Line 6 is the font weight font with propertied physically is used to set how thick or thin you want
the characters in the text to be displayed.
Okay so there are several ways you can do this.
You can set it to bowl order.
Values can include no more.
Or you can actually set in number.
If you are setting in no value you can do that to define the thickness of the characters.
If you specify a hundred like abdon here on line 20 it defies the thickness of the characters saw the
signatures from two form read for example is the same as normal.
If I was to set these values from ball to normal is the same as same instead of board.
I always said that to instead of normal I said that to 400 so bald is equivalent to 700.
Notice here in line 20 years just 100.
So to make the text bold is equivalent to seven hundred ten.
Anything above dad increases the thickness of the characters line 9.
I am styling they hate one selector which is a title for the web page and giving it a colour or museum
a hexadecimal value for the colour font.
Wait again I'm using bold which is equivalent to 700 font size which is the atl's size of the font of
text.
I've set that to 50 pixels.
I have set the margin online 13 to 1 3 5 0 and 20 pixels margin basically refers to the space outside
the limit and there's usually four values.
You've got the top the right the bottom and the left so you apply it in that order.
Top right bottom left the flag does have all is specified three values for on line 13.
Those three values all apply.
The first value goes to the top top the second goes to the right hand the third goes to the bottom right.
So the first value goes to the top.
The second sorry will go.
So the right and the left margin are right and then the last value will go to the bottom whereby specified
only three values the first goes to the top.
The second value goes to the right and the left and the last goes to the bottom so that's how you specify
the margin.
Padding is the same way you apply it in the same way.
Bob padian refers to the space inside the element.
Don't forget to end your values with a semicolon.
And don't forget to separate the properties from the values with a colon.
If that is not applied properly like 16 to twenty three I have caught Heidi now time styling.
The idea here the ideals clock Dave and I've applied for Lane propertys values.
Some of them I've already gone through so I'm not going to run through them again.
Line 19 display means I want the Elemeno displayed as a block in line so it will show the hours days
minutes on the block in line.
Can't wait.
I've already covered text a line covered font size I've already covered like 25 is interesting.
I haven't quite the same Dave but notice I got a great advance sign after it.
The greater than sign.
Online 25 means it's applying to the immediate chewed trend of dat D.
All right so which means apply this time in here to the immediate should rent of this clogged the cord
did.
So if we go to our CML this is the clock.
We've got the club here okay and this clock has got a deaves and is also got Spanish elements.
That's what it's referring to whereby you have say for example a three hour level of D.
The style in the styling will only affect the second level of div and not the turd.
However if I was to use a space between the selectors instead of the greater than sign then it will
affect both the second and third level.
Deaves So this space usually means if you just create a space rather than the greater than sign it will
apply to all the levels of that element.
Please note that the greater down selektah is not supported in lower versions of Internet Explorer.
Okay but he should work in other higher versions of it.
Again here line 32 have used the Deve here and gritter done sign.
What that means it will apply this time until the child element of the D.
That is called span.
Okay so that means it will apply to that to the child element bodies radios refers to get around at
corners.
It makes the elements gives it a rounded edge background I've already discussed this play like we have
already mentioned.
Padding refers to the space inside the element and it pretty much works the same way as the margin.
So it has the four corners that I mentioned previously.
Font size.
I've already discussed so I'll just save this and then we can see what our page looks like.
Excellent So this is what this time end looks like.
Not too bad.
Notice the end of the days.
None of these is shown yet.
Will implement that using javascript so that's fit for this lecture.
Thank you for watching.
Bye for now.